<template>
	<view class="index">
		<image src="../../static/img/add.png" mode="widthFix" class="icon" @click="add"></image>
		<!-- 		<view class="search">
			<u-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false"></u-search>
		</view> -->
		<view class="tabs">
			<u-tabs :list="list1" @click="click" :current="current" lineColor="#FF7428"></u-tabs>
		</view>
		<scroll-view scroll-y="true" class="scroll">
			<view class="items">
				<view class="" v-if="list.length==0">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
				<view class="item" v-for="item in list" :key="item.id" style="background-color: white;">
					<view class="top">
						<image :src="'http://ba.fuliaoxx.com'+item.image" mode=""></image>
						<view class="detail">
							<view class="">
								{{item.name}}
							</view>
							<view class="" style="color: #ffffff;font-size: 24rpx;">
								库存1件
							</view>
							<view class="" style="text-align: right;color: #ff641d;font-weight: 600;">
								￥{{item.price}}
							</view>
						</view>
					</view>
					<view class="btns" v-if="current==0">
						<view class="btn" @click="delItem(item)">
							删除
						</view>
						<!-- 					<view class="btn" v-if="current ==2" @click="downGoods()">
							上架
						</view>
						<view class="btn" v-if="current ==0" @click="upGoods()">
							下架
						</view> -->
						<view class="btn" @click="edit(item)">
							编辑
						</view>
					</view>
					<view class="btns" v-else>
						<view class="btn" @click="look(item)">
							查看卖家联系方式
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-modal :show="show" title="联系买家" @confirm="confirm" cancelText="关闭" @cancel="show=false" confirmText="点击联系"
			showCancelButton>
			<view class="slot-content">
				<view class="" style="display: flex;width: 80vw;align-items: center;margin-bottom: 20rpx;">
					<view class="" style="min-width: 100rpx;color: grey;font-size: 28rpx;">
						买家姓名：
					</view>
					<view class="">
						{{info.saleAddress.username}}
					</view>
				</view>
				<view class="" style="display: flex;width: 80vw;align-items: center;margin-bottom: 20rpx;">
					<view class="" style="min-width: 100rpx;color: grey;font-size: 28rpx;">
						地址：
					</view>
					<view class="">
						{{info.saleAddress.province}}/{{info.saleAddress.city}}/{{info.saleAddress.area}}/{{info.saleAddress.detail}}
					</view>
				</view>
				<view class="" style="display: flex;width: 80vw;align-items: center;margin-bottom: 20rpx;">
					<view class="" style="min-width: 100rpx;color: grey;font-size: 28rpx;">
						电话：
					</view>
					<view class="">
						{{info.saleAddress.mobile}}
					</view>
				</view>
				<view class="" style="display: flex;width: 80vw;align-items: center;">
					<view class="" style="min-width: 100rpx;color: grey;font-size: 28rpx;">
						买家备注：
					</view>
					<view class="">
						{{info.orderInfo.remark}}
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getUsed,
		delUsed
	} from "@/request/api/goods.js"
	// import {
	// 	stringify
	// } from "querystring";
	export default {
		data() {
			return {
				keyword: '',
				current: 0,
				list: [],
				show: false,
				list1: [{
					name: '未出售',
				}, {
					name: '已出售',
				}],
				userInfo: {},
				info: {}
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.list = [];
			getUsed({
				user_id: this.userInfo.id
			}).then(res => {
				if (this.current == 0) {
					this.list = res.data.filter(item => item.status == '1');
				} else if (this.current == 1) {
					this.list = res.data.filter(item => item.status == '2');
				}
			})
		},
		methods: {
			look(item) {
				this.info = item;
				this.show = true;
			},
			confirm() {
				uni.makePhoneCall({
					phoneNumber: this.info.saleAddress.mobile //仅为示例
				});
			},
			async downGoods(item) {
				// let json = JSON.parse(JSON.stringify(item));
				// json['status'] = '2';
				// let res = await editGoods(json);
				// if (res.code == 1) {
				// 	this.list = [];
				// 	getGoods().then(res => {
				// 		if (this.current == 0) {
				// 			getGoods().then(res => {
				// 				this.list = res.data.filter(item => item.status == '2');
				// 			})
				// 		} else if (this.current == 1) {
				// 			getGoods().then(res => {
				// 				this.list = res.data.filter(item => item.num == 0);
				// 			})
				// 		} else {
				// 			getGoods().then(res => {
				// 				this.list = res.data.filter(item => item.status == '1');
				// 			})
				// 		}
				// 	})
				// }
			},
			async upGoods(item) {
				// let json = JSON.parse(JSON.stringify(item));
				// json['status'] = '1';
				// let res = await editGoods(json);
				// if (res.code == 1) {
				// 	this.list = [];
				// 	getGoods().then(res => {
				// 		if (this.current == 0) {
				// 			getGoods().then(res => {
				// 				this.list = res.data.filter(item => item.status == '2');
				// 			})
				// 		} else if (this.current == 1) {
				// 			getGoods().then(res => {
				// 				this.list = res.data.filter(item => item.num == 0);
				// 			})
				// 		} else {
				// 			getGoods().then(res => {
				// 				this.list = res.data.filter(item => item.status == '1');
				// 			})
				// 		}
				// 	})
				// }
			},
			delItem(item) {
				delUsed({
					id: item.id
				}).then(res => {
					this.list = [];
					getUsed({
						user_id: this.userInfo.id
					}).then(res => {
						if (this.current == 0) {
							this.list = res.data.filter(item => item.status == '1');
						} else if (this.current == 1) {
							this.list = res.data.filter(item => item.status == '2');
						}
					})
				})
			},
			edit(item) {
				uni.navigateTo({
					url: "/pagesA/addgoods/editgoods?item=" + JSON.stringify(item)
				})
			},
			click(e) {
				if (e.index == this.current) return;
				this.list = [];
				this.current = e.index;
				getUsed({
					user_id: this.userInfo.id
				}).then(res => {
					if (this.current == 0) {
						this.list = res.data.filter(item => item.status == '1');
					} else if (this.current == 1) {
						this.list = res.data.filter(item => item.status == '2');
					}
				})
			},
			add() {
				uni.navigateTo({
					url: '/pagesA/addgoods/addgoods'
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.index {
		height: 100%;
	}

	.icon {
		position: fixed;
		z-index: 11;
		bottom: 180rpx;
		width: 150rpx;
		right: 20rpx;
	}

	.scroll {
		height: calc(100% - 88rpx);

		.items {

			.item {
				margin: 20rpx;
				box-shadow: 3rpx 6rpx 6rpx #eeeeee;
				border: 1rpx solid #eeeeee;
				border-radius: 20rpx;
				padding: 20rpx;

				.btns {
					display: flex;
					justify-content: flex-end;
					margin-top: 10rpx;

					.btn {
						border-radius: 100px;
						padding: 8rpx 26rpx;
						margin-right: 10rpx;
						border: 1rpx solid #dedede;
						font-size: 26rpx;
					}
				}

				.top {
					display: flex;

					.detail {
						flex: 1;
						height: 160rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
					}
				}

				image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.search {
		height: 100rpx;
		background-color: white;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}
</style>